<template>
  <div class="app-container">
    <!-- 类型管理新增 -->
    <h5 class="titleInfo">基础信息</h5>
    <el-form ref="form"  :inline="true" :model="form" :rules="rules" label-width="150px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="公司全称" prop="name">
            <el-input v-model="form.name" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司简称" prop="nick">
            <el-input v-model="form.nick" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="法定代表人姓名" prop="legalName">
            <el-input v-model="form.legalName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="法定代表人身份证号/护照号" prop="legalIdCard">
            <el-input v-model="form.legalIdCard" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="组织机构代码" prop="organCode">
            <el-input v-model="form.organCode" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业注册类型" prop="organType">
            <el-select v-model="form.organType" placeholder="请选择" clearable filterable>
              <el-option
                v-for="item in organTypeClass"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单位类型" prop="companyType">
            <el-select v-model="form.companyType" placeholder="请选择" clearable filterable>
              <el-option
                v-for="item in companyTypeClass"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="成立时间" prop="foundingTime">
            <el-date-picker
              v-model="form.foundingTime"
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="法定代表人归属地" prop="legalLocate">
            <el-select v-model="form.legalLocate" placeholder="请选择" clearable filterable>
              <el-option
                v-for="item in legalLocateClass"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="注册用户类型" prop="userType">
            <el-select v-model="form.userType" placeholder="请选择" clearable filterable>
              <el-option
                v-for="item in userTypeClass"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经营范围" prop="scope">
            <el-input v-model="form.scope" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分公司类型" prop="officeType">
            <el-select v-model="form.officeType" placeholder="请选择" clearable filterable>
              <el-option
                v-for="item in officeTypeClass"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 经营信息 -->
      <div class="divBar"></div>
      <h5 class="titleInfo">经营信息</h5>
      <el-row>
        <el-col :span="12">
          <el-form-item label="代理人姓名" prop="agentName">
            <el-input v-model="form.agentName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="代理人手机" prop="agentPhone">
            <el-input v-model="form.agentPhone" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="代理人身份证号" prop="agentIdentity">
            <el-input v-model="form.agentIdentity" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!-- <el-form-item label="选择地区" prop="address"> -->
          <!-- <el-cascader
              v-model="form.areas"
              placeholder="请选择地区"
              :options="options"
              @change="pcaList"
          />-->
          <!-- <el-cascader-multi v-model="form.address" :data="options"></el-cascader-multi>
          </el-form-item>-->
          <!--联动选择地区-->
          <el-form-item label="选择地区：" prop="province">
            <el-select v-model="form.province" placeholder="请选择省" @change="provinceChanged">
              <el-option
                v-for="item in provinces"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-select
              v-if="flag"
              v-model="city"
              :loading="loadingCity"
              @change="cityChanged"
              placeholder="请选择市"
            >
              <el-option
                v-for="item in cities"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <!-- <select name id @change="cityChanged()">
              <option :value="item.value" v-for="item in cities" :key="item.label">{{item.label}}</option>
            </select>-->
            <div>
              <el-tag
                :key="tag.value"
                v-for="tag in dynamicTags"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)"
              >{{tag.label}}</el-tag>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="登录密码" prop="password">
            <el-input v-model="form.password" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button
          style="margin-top:30px;margin-left:130px"
          type="primary"
          @click="submitFn('form')"
        >立即提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { regionDropDown } from "@/api/area";
import { filialeFOIndexListAdd, getAddress } from "@/api/financialOther";
export default {
  name: "filialeFOAdd",
  filters: {},
  data() {
    // 密码校验
    var validatePassword = (rule, value, callback) => {
      // const isRate = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/;
      const isRate = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,}$/;
      if (!value) {
        // alert('空')
        callback(new Error("请输入密码"));
        // this.warningStatus("请输入密码!");
      } else if (!isRate.test(value)) {
        callback(
          new Error("密码需不低于8位，至少使用一个字母+数字，不可使用特殊字符")
        );
        // this.warningStatus("请输入正确密码");
      } else {
        callback();
      }
    };
    // 邮箱校验
    var validateEmail = (rule, value, callback) => {
      const isRate = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
      if (!value) {
        // alert('空')
        callback(new Error("请输入邮箱"));
      } else if (!isRate.test(value)) {
        callback(new Error("请输入正确邮箱"));
      } else {
        callback();
      }
    };
    // 手机号校验
    var validatePhone = (rule, value, callback) => {
      const isRate = /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/;
      if (!value) {
        // alert('空')
        callback(new Error("请输入手机号"));
      } else if (!isRate.test(value)) {
        callback(new Error("请输入正确手机号"));
      } else {
        callback();
      }
    };

    return {
      flag: false,
      loadingCity: false,
      province: "",
      city: "",
      citychild: "",
      provinces: [],
      cities: [],
      dynamicTags: [],
      //
      form: {
        name: "",
        nick: "",
        legalName: "",
        legalIdCard: "",
        organCode: null,
        organType: null,
        companyType: 0,
        foundingTime: "",
        legalLocate: null,
        userType: null,
        scope: "",
        officeType: null,
        agentName: "",
        agentPhone: "",
        agentIdentity: "",
        email: "",
        areas: [],
        address: [],
        province: "",
        password: ""
      },
      id: 0,
      rules: {
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        nick: [{ required: true, message: "请输入", trigger: "blur" }],
        legalName: [{ required: true, message: "请输入", trigger: "blur" }],
        legalIdCard: [{ required: true, message: "请输入", trigger: "blur" }],
        organCode: [{ required: true, message: "请输入", trigger: "blur" }],
        organType: [{ required: true, message: "请输入", trigger: "blur" }],
        companyType: [{ required: true, message: "请输入", trigger: "blur" }],
        foundingTime: [{ required: true, message: "请输入", trigger: "blur" }],
        legalLocate: [{ required: true, message: "请输入", trigger: "blur" }],
        userType: [{ required: true, message: "请输入", trigger: "blur" }],
        scope: [{ required: true, message: "请输入", trigger: "blur" }],
        officeType: [{ required: true, message: "请输入", trigger: "blur" }],
        agentName: [{ required: true, message: "请输入", trigger: "blur" }],
        agentPhone: [{ validator:validatePhone,required: true, message: "请输入", trigger: "blur" }],
        agentIdentity: [{ required: true, message: "请输入", trigger: "blur" }],
        email: [
          {
            validator: validateEmail,
            required: true,
            trigger: "blur"
          }
        ],
        province: [{ required: true, message: "请输入", trigger: "change" }],
        password: [
          {
            validator: validatePassword,
            required: true,
            trigger: "blur"
          }
        ]
      },
      options: [],
      ProjectClass: [],
      //企业注册类型 0-组织机构代码号;1-多证合一，传递社会信用代码号;2-企业工商注册码;23-其它
      organTypeClass: [
        { value: 0, label: "组织机构代码号" },
        { value: 1, label: "多证合一，传递社会信用代码号" },
        { value: 2, label: "企业工商注册码" },
        { value: 23, label: "其它" }
      ],
      //单位类型 0-普通企业，1-社会团体，2-事业单位，3-民办非企业单位，4-党政及国家机构，默认0
      companyTypeClass: [
        { value: 0, label: "普通企业" },
        { value: 1, label: "社会团体" },
        { value: 2, label: "事业单位" },
        { value: 3, label: "民办非企业单位" },
        { value: 4, label: "党政及国家机构" }
      ],
      //法定代表人归属地 0-大陆;1-香港;2-澳门;3-台湾;4-外籍;23-其它（企业账号中的企业法人、代理人不支持）
      legalLocateClass: [
        { value: 0, label: "大陆" },
        { value: 1, label: "香港" },
        { value: 2, label: "澳门" },
        { value: 3, label: "台湾" },
        { value: 4, label: "外籍" },
        { value: 23, label: "其它（企业账号中的企业法人、代理人不支持）" }
      ],
      //注册用户类型 1-代理人注册;2-法人注册;0-不注册法人或代理人
      userTypeClass: [
        { value: 0, label: "不注册法人或代理人" },
        { value: 1, label: "代理人注册" },
        { value: 2, label: "法人注册" }
      ],
      //分公司类型 0:省分公司、1:省运营中心、2:市运营中心
      officeTypeClass: [
        { value: 0, label: "省分公司" },
        { value: 1, label: "省运营中心" },
        { value: 2, label: "市运营中心" }
      ]
    };
  },
  watch: {
    // 监听地区选项
    "form.address": function(val) {
      // console.log(val[0]);
      // if (val) {
      //   this.form.areas = val;
      // }
    }
  },
  mounted() {
    this.getArea();
  },
  methods: {
    // 省市区数据改变
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    provinceChanged(value) {
      // console.log(value);
      if (value !== "") {
        this.flag = true;
        this.loadingCity = true;
        getAddress({ id: value }).then(res => {
          // console.log(res);
          if (res.data.code == 0) {
            this.loadingCity = false;
            let arr2 = [];
            res.data.data.forEach((item, index) => {
              arr2.push({
                value: item.id,
                label: item.name
              });
            });
            this.cities = arr2;
          }
        });
      }
    },
    cityChanged(value) {
      console.log("市", value);
      this.cities.filter(res => {
        if (value == res.value) {
          // this.dynamicTags.push(res);
          this.dynamicTags = [...new Set(this.dynamicTags.push(res))];
        }
      });
      this.province = "";

      // if(value){
      //   this.form.areas.push(value); // 将文本框的值添加到数组中
      // }
      // console.log(this.form.areas)
    },
    // 省市区
    getArea() {
      getAddress({ id: 1 }).then(res => {
        console.log(res);
        const newArr = [];
        res.data.data.forEach((item1, index) => {
          newArr.push({
            value: item1.id,
            label: item1.name
          });
          if (item1.children != null) {
            newArr[index]["children"] = [];
            item1.children.forEach(item2 => {
              newArr[index]["children"].push({
                value: item2.id,
                label: item2.name
              });
            });
          }
        });
        // console.log(111, newArr);
        this.options = newArr;
        //
        this.provinces = newArr;
      });
    },

    // 提交
    submitFn(e) {
      this.form.areas = [];
      this.dynamicTags.map(res => {
        this.form.areas.push(res.value);
      });
      this.$refs[e].validate(valid => {
        if (valid) {
          const datas = this.form;
          filialeFOIndexListAdd(datas).then(res => {
            if (res.data.code == 0) {
              this.$message({
                message: "添加成功",
                type: "success"
              });
              this.$router.push("/FilialeFOIndex");
            } else {
              this.$message({
                message: res.data.msg,
                type: "warning"
              });
            }
          });
        } else {
          this.$message({
            message: "必填项不能为空",
            type: "warning"
          });
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.app-container {
  padding: 0px !important;
}
.form {
  margin-left: 268px;
}
.el-switch__label--left {
  margin-right: 0;
}
.el-switch__label.is-active {
  color: #409eff !important;
  width: 100%;
  text-align: center;
  display: inline-block;
}
</style>
